<template>
  <!-- 当事⼈信息 -->
  <div v-if="thisDiv === 3">
    <table>
      <slot name="left"/>
      <tr>
        <td class="td-title">姓名</td>
        <td>{{ formData.baqsjRecordParty.name || '' }}</td>
        <td class="td-title">工号</td>
        <td>{{ formData.baqsjRecordParty.empNo || '' }}</td>
        <td class="td-title">职称</td>
        <td>{{ formData.baqsjRecordParty.stationName || '' }}</td>
      </tr>
      <tr>
        <td class="td-title">岗位</td>
        <td>{{ formData.baqsjRecordParty.usergroupName || '' }}</td>
        <td class="td-title">人员分类</td>
        <td>{{ getPersonnelCategory(formData.baqsjRecordParty.className) || '' }} </td>
        <td class="td-title">部门/病区</td>
        <td>{{ formData.baqsjRecordParty.deptName || '' }}</td>
      </tr>
      <slot name="right"/>
    </table>
  </div>
  <div v-else style="display: flex; width: 100%; flex-wrap: wrap; ">
    <slot name="left"/>
    <!-- 当事人信息 -->
    <el-form-item label="姓名" prop="baqsjRecordParty.name">
      <el-input
        :style="{ width: '200px' }"
        placeholder="请输入姓名"
        v-model="formData.baqsjRecordParty.name"
      />
    </el-form-item>

    <el-form-item label="工号" prop="baqsjRecordParty.empNo">
      <el-input
        :style="{ width: '200px' }"
        placeholder="请输入工号"
        v-model="formData.baqsjRecordParty.empNo"
      />
    </el-form-item>

    <el-form-item label="职称" prop="baqsjRecordParty.stationName">
      <el-input
        :style="{ width: '200px' }"
        placeholder="请输入职称"
        v-model="formData.baqsjRecordParty.stationName"
      />
    </el-form-item>

    <el-form-item label="部门/病区" prop="baqsjRecordParty.deptName">
      <el-input
        :style="{ width: '200px' }"
        placeholder="请输入部门/病区"
        v-model="formData.baqsjRecordParty.deptName"
      />
    </el-form-item>

    <el-form-item label="岗位" prop="baqsjRecordParty.usergroupName">
      <el-input
        :style="{ width: '200px' }"
        placeholder="请输入岗位"
        v-model="formData.baqsjRecordParty.usergroupName"
      />
    </el-form-item>

    <el-form-item label="人员分类" prop="baqsjRecordParty.className">
      <el-radio-group v-model="formData.baqsjRecordParty.className">
        <el-radio v-for="(item, index) in classNameList" :key="index" :label="item.value">{{ item.label }}</el-radio>
      </el-radio-group>
      <el-input
        v-if="formData.baqsjRecordParty.className === '16'"
        :style="{ width: '200px' }"
        placeholder="请输入"
        v-model="formData.baqsjRecordParty.classNameOther"
      />
    </el-form-item>
    <slot name="right"/>
  </div>
</template>

<script>
export default {
  props: {
    formData: {
      type: Object,
      default: () => ({})
    },
    thisDiv: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      classNameList: [
        { value: '10', label: '医生' },
        { value: '11', label: '护士' },
        { value: '12', label: '技师' },
        { value: '13', label: '管理' },
        { value: '14', label: '后勤' },
        { value: '15', label: '学生' },
        { value: '16', label: '其他' }
      ]
    }
  },
  methods: {
    getPersonnelCategory(value) {
      const item = this.classNameList.find(item => item.value === value)
      if (value === '16' && item) {
        return item.label + '（' + this.formData.baqsjRecordParty.classNameOther + '）'
      }
      return item ? item.label : value
    }
  }
}
</script>
<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  table-layout: fixed;
}
td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: left;
  /* 调整行间距 */
  line-height: 1.6;
  /* 调整字体大小 */
  font-size: 18px;
  /* 调整字间距 */
  letter-spacing: 0.5px;
}

.td-title {
  width: 12%;
  background-color: #fff;
}
</style>
